<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://cdn.bootcss.com/vue/2.2.6/vue.min.js"></script>
</head>
<body>
<div id="example">
	<p>xxx: {{ message }}</p>
	<p>yyy: {{ reser }}</p>
</div>
<script>
// 基础例子------------------
var vm = new Vue ({
	el: '#example',
	data: {
		message: 'hello'
	},
	computed: {
		reser: function() {
			return this.message.split('').reverse().join('');
		}
	}
})

// 这里我们声明了一个reser。我们提供的函数将用作属性ve.reser的getter
console.log(vm.reser);
vm.message = 'goodbye'
console.log(vm.reser);

// 你可以像绑定普通属性一样在模板中绑定计算属性。vue会找到依赖并绑定更新

// 计算缓存 vs Methods--------------
// 我们可以将同一个函数定义为一个方法而不是一个计算属性。两种方式的结果确实是相同的。然而，不同的是计算属性是基于他们的依赖进行缓存的。计算属性只有在他的相关依赖发生变化的时候才会重新求值，这意味着只要message没有发生变化，多次访问reser计算属性会理解返回之前的计算结果，而不必再次计算

</script>
</body>
</html>